<template>
  <div class="phone-container">
    <div class="top">
      <div class="title">首页 <span></span></div>
    </div>
    <div class="banner">
      <img :src="state.phoneBannerUrl" alt="" />
    </div>
    <div class="neirong">
      <el-row :gutter="8">
        <el-col :span="8" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page]">
          <div class="pageItem" @click="toPage('/phone/page1')">
            <img :src="state.scUrl" alt="" />
            <br />
            <span>生产看板</span>
          </div>
        </el-col>
        <el-col :span="8" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page2]">
          <div class="pageItem">
            <img :src="state.xsUrl"  alt=""/>
            <br />
            <span>销售看板</span>
          </div>
        </el-col>
        <el-col :span="8" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page3]">
          <div class="pageItem" @click="toPage('/phone/page3')">
            <img :src="state.jdUrl"  alt=""/>
            <br />
            <span>销售订单生产进度</span>
          </div>
        </el-col>
        <el-col :span="8" v-auths="[state.permissionType.sysAdmin, state.permissionType.pageData_page4]">
          <div class="pageItem" @click="toPage('/phone/page4')">
            <img :src="state.jdUrl"  alt=""/>
            <br />
            <span>销售订单生产进度</span>
          </div>
        </el-col>
        <el-col :span="8" v-if="state.showLogout">
          <div class="pageItem" @click="logout">
            <img :src="state.exitUrl"  alt=""/>
            <br />
            <span>退出系统</span>
          </div>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup name="phoneHome">
import {reactive, onMounted, nextTick} from "vue";
import { useRouter } from 'vue-router';
import { ElMessageBox, ElMessage } from 'element-plus';
import pinia from '/@/stores/index';
import { storeToRefs } from "pinia";
import { useUserInfo } from "/@/stores/userInfo";
import PermissionType from "/@/utils/PermissionType";
import phoneBanner from '/@/assets/phone/phone_c.jpg';
import sc from '/@/assets/phone/sc.png';
import xs from '/@/assets/phone/xs.png';
import jd from '/@/assets/phone/jd.png';
import exit from '/@/assets/phone/exit.png';
import {Session} from "/@/utils/storage";

const router = useRouter();
const stores = useUserInfo(pinia);
const { userInfos } = storeToRefs(stores);

const state = reactive({
  phoneBannerUrl : phoneBanner,
  scUrl : sc,
  xsUrl : xs,
  jdUrl : jd,
  exitUrl : exit,
  permissionType : PermissionType,
  userName : userInfos.value.userName,
  showLogout : true
})
const toPage = (to)=>{
  router.push(to)
}


const logout= ()=>{
  ElMessageBox({
    closeOnClickModal: false,
    closeOnPressEscape: false,
    title: '提示',
    message: '此操作将退出登录, 是否继续?',
    showCancelButton: true,
    confirmButtonText: '确定',
    cancelButtonText: '取消',
    buttonSize: 'default',
    beforeClose: (action, instance, done) => {
      if (action === 'confirm') {
        instance.confirmButtonLoading = true;
        instance.confirmButtonText = '退出中';
        setTimeout(() => {
          done();
          setTimeout(() => {
            instance.confirmButtonLoading = false;
          }, 300);
        }, 700);
      } else {
        done();
      }
    },
  }).then(async () => {
      // 清除缓存/token等
      Session.clear();
      // 使用 reload 时，不需要调用 resetRoute() 重置路由
      window.location.reload();
  }).catch(() => {});
}
onMounted(()=>{
  nextTick(()=>{

  })
})
</script>

<style scoped lang="scss">
.phone-container {
  div.neirong{
    width: 100%;
    height: calc(100vh - 240px);
    background-color: #ffffff;
    padding: 8px;
    overflow-y: auto;
    .el-col{
      margin-bottom: 8px;
    }
    .pageItem{
      width: 100%;
      height: 100%;
      padding: 10px;
      text-align: center;
      border: 1px solid #d5cfcf;
      border-radius: 5px;
      img{
        display: inline-block;
        width: 48px;
        height: 48px;
        margin-bottom: 8px;
      }
    }
  }
}
</style>
